jQuery ClassyGradient

Overview

ClassyGradient is a jQuery plugin written by Marius Stanciu - Sergiu, a plugin that allows you to add gradient generators in your web apps and sites. Smart and fully cutomizable, it is suitable for any type of use : CSS generators, HTML5 canvas applications, live usage.

  • Unlimited gradient points.
  • HTML5 Browsers compatible (IE9 +).
  • Generate CSS code.
  • Customizable by CSS.
  • Can easily be combined with HTML5 canvas.
  • No server files, only Javascript & CSS.

Instructions

First you need to include the jQuery library, the jQuery UI library and the ColorPicker plugin, since ClassyGradient is a plugin that depends on those. You can download jQuery from the jQuery website or link it directly from the Google CDN.

<link rel="stylesheet" href="css/jquery.colorpicker.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>
<script src="js/jquery.colorpicker.js"></script>

Secondly, you need to include the jQuery ClassyGradient javascript and CSS files into your page. You can do it by adding the code below to your page.

<link rel="stylesheet" href="css/jquery.classygradient.css" />
<script src="js/jquery.classygradient.js"></script>

Next, you create the element that you want to trigger the gradient on.

<div class="gradient1"/><div>

As the last step, you trigger the ClassyGradient() function on the element you just created. For example, we trigger the function on the div with the class gradient1.

$('.gradient1').ClassyGradient(); 

Options

gradient - default gradient points.

width - gradient preview width.

height - gradient preview height.

point - gradient point size.

target - gradient destination.

orientation - gradient orientation, can be horizontal or vertical.

tooltip - tooltip background gradient points


onChange - event fired on gradient changes.

onInit - event fired on initialization.

getArray - return the gradient points as an array.

getCss - return the full gradient generated CSS code.

getString - return the gradient points as a string.

setOrientation - change gradient orientation.

update - trigger this method if you're updating parameters after plugin init.

Demo

Basic

<div class="gradient1"></div>

$(document).ready(function(){
    $('.gradient1').ClassyGradient(); 
});

Customized

check out this hefty (and girly) gradient

<div class="targetEl">check out this hefty (and girly) gradient</div>
<select id="orientation" onchange="changeOrientation();">
    <option value="horizontal">Horizontal</option>
    <option value="vertical" selected="selected">Vertical</option>
</select>
<div class="gradient2"></div>

$(document).ready(function() {
    $('.gradient2').ClassyGradient({
        gradient: '#ebf1f6 0%,#ff9cff 40%,#ff6aff 61%,#ff2db7 100%',
        target: '#target',
        tooltipGradient: ' #fceabb 0%,#fccd4d 49%,#f8b500 53%,#fbdf93 100%'
    }); 
});
function changeOrientation() {
    var orientation = $('#orientation :selected').val();
    $('.gradient2').data('ClassyGradient').setOrientation(orientation);
}

Generate CSS code

<div class="gradient3"></div>
<textarea class="export"></textarea>

$(document).ready(function(){
    $('.gradient3').ClassyGradient({                                
        gradient: '#00ffff 0%,#008900 30%,#f00044 70%,#0042d2 100%',
        onChange: function(stringGradient,cssGradient) {
            $('.export').html(cssGradient);
        }
    }); 
});